package myJs.common

import myJs.CpLayer
import myJs.admin.editSample.EditSample
import myJs.admin.sampleManage.SampleManage
import myJs.admin.viewTest.ViewTest
import myJs.api.Api
import myJs.cps._
import myJs.myPkg.{ReactRouterDOM, layer}
import myJs.tool.Tool
import org.scalajs.dom.{URLSearchParams, html}
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.Sample.SampleInfo
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.core.facade.React
import slinky.web.html._

/**
 * Created by yz on 21/1/2022
 */
@react object ViewSampleFormCp {

  case class Props(labFileShow: Boolean = true)

  val component = FunctionalComponent[Props] { props =>

    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val curId = searchParams.get("id")

    val (idV, setIdV) = useState(curId)
    val (sampleInfo, setSampleInfo) = useState(SampleInfo(tests = List.empty))

    object FTool {

      def refreshSampleInfo = {
        val options = Tool.layerOptions.copy(shade = List("0.1", "#fff"))
        val index = layer.load(0, options)
        Api.sample.getById(idV).map { curSampleInfo =>
          setSampleInfo(curSampleInfo)
          layer.close(index)
        }
      }

    }

    useEffect(() => {
      FTool.refreshSampleInfo
    }, List()
    )

    val formRef = React.createRef[html.Form]

    form(className := "form-horizontal", id := "form", ref := formRef,
      h4("基本信息"),
      div(className := "form-group",
        label(className := "control-label col-sm-2 col-xs-2", "样本编号:"),
        div(className := "col-sm-4 col-xs-6",
          PureInputCp(name = "id", `type` = "text", value = idV, onChange = (v: String) => setIdV(v),
            readOnly = true)
        )
      ),

      BasicViewCp(sampleInfo = sampleInfo),

      h4("冰箱信息"),

      div(className := "form-group",
        label(className := "control-label col-sm-2", "冰箱编号:"),
        div(className := "col-sm-4",
          p(className := "form-control-static", s"${sampleInfo.freezerNumber}")
        ),
        label(className := "control-label col-sm-2", "层数:"),
        div(className := "col-sm-4",
          p(className := "form-control-static", s"${sampleInfo.freezerLayerNumber}")
        )
      ),

      div(className := "form-group",
        label(className := "control-label col-sm-2", "行数:"),
        div(className := "col-sm-4",
          p(className := "form-control-static", s"${sampleInfo.rowNumber}")
        ),
        label(className := "control-label col-sm-2", "列数:"),
        div(className := "col-sm-4",
          p(className := "form-control-static", s"${sampleInfo.colNumber}")
        )
      ),

      CommentViewCp(sampleInfo = sampleInfo),

      LabViewCp(sampleInfo = sampleInfo, show = props.labFileShow),

      h4("测试信息"),

      sampleInfo.tests.zipWithIndex.map { case (testData, curI) =>

        div(key := s"${curI}",

          div(className := "form-group",
            label(className := "control-label col-sm-2", "测试类型:"),
            div(className := "col-sm-4",
              p(className := "form-control-static", s"${testData.testType}")
            ),
            label(className := "control-label col-sm-2", "公司:"),
            div(className := "col-sm-2", style := Style(),
              p(className := "form-control-static", s"${testData.company}")
            ),
            div(className := "col-sm-2", style := Style(),
              a(className := "form-control-static", target := "_blank",
                href := s"${ViewTest.absolutePath}?sampleId=${sampleInfo.id}&testType=${testData.testType}&company=${testData.company}",
                ">>测试详情")
            ),
          ),

        )

      },
    )

  }


}
